<script type="text/javascript">
$(document).ready(function () {
    $('#cat_1').change(function () {
        var cat_1 = $(this).val();
        if (cat_1 == '0') {
            $('#cat_2').html('');
            $('#cat_2').attr('disabled', true);
            return(false); }
        $('#cat_2').attr('disabled', true);
        $('#cat_2').html('<option>загрузка...</option>');
        var url = '<?php echo $this->baseUrl($this->AjaxPath)?>';
        $.get(url,"id=" + cat_1,
            function (result) {
                if (result.type == 'error') {alert('error');return(false);}
                else {
                    var options = '';
                    $(result.children).each(function() {
                        options += '<option value="' + $(this).attr('id') + '">' + $(this).attr('Name') + '</option>';
                    });
                    $('#cat_2').html(options);
                    $('#cat_2').attr('disabled', false);
                }},"json");});




    $('#cat_2').change(function () {
        var cat_1 = $(this).val();
        if (cat_1 == '0') {
            $('#cat_3').html('');
            $('#cat_3').attr('disabled', true);
            return(false); }
        $('#cat_3').attr('disabled', true);
        $('#cat_3').html('<option>загрузка...</option>');
        var url = '<?php echo $this->baseUrl($this->AjaxPath)?>';
        $.get(url,"id=" + cat_1,
            function (result) {
                if (result.type == 'error') {alert('error');return(false);}
                else {
                    var options = '';
                    $(result.children).each(function() {
                        options += '<option value="' + $(this).attr('id') + '">' + $(this).attr('Name') + '</option>';
                    });
                    $('#cat_3').html(options);
                    $('#cat_3').attr('disabled', false);
                }},"json");});



    $('#cat_3').change(function () {
        var cat_1 = $(this).val();
        if (cat_1 == '0') {
            $('#cat_4').html('');
            $('#cat_4').attr('disabled', true);
            return(false); }
        $('#cat_4').attr('disabled', true);
        $('#cat_4').html('<option>загрузка...</option>');
        var url = '<?php echo $this->baseUrl($this->AjaxPath)?>';
        $.get(url,"id=" + cat_1,
            function (result) {
                if (result.type == 'error') {alert('error');return(false);}
                else {
                    var options = '';
                    $(result.children).each(function() {
                        options += '<option value="' + $(this).attr('id') + '">' + $(this).attr('Name') + '</option>';
                    });
                    $('#cat_4').html(options);
                    $('#cat_4').attr('disabled', false);
                }},"json");});

    


   });
</script>

<form action="<?php echo $this->baseUrl($this->SubmitPath)?>" method="get">
    <p>Первый уровень:</p>
    <select name="cat[]" id="cat_1">
    <option value="-1">- выберите категорию -</option>
    <?php 
    
    foreach($this->Vars['Categories'] as $Item) 
    {
        echo '<option value="' . $Item['id'] . '">' . $Item['Name'] . '</option>';
    }
    ?>
    </select>
    <p>Второй уровень:</p>
    <select name="cat[]" id="cat_2" disabled="disabled">
        <option value="0"> </option>
    </select>
    <p>Третий уровень:</p>
    <select name="cat[]" id="cat_3" disabled="disabled">
        <option value="0"> </option>
    </select>
    
    <p>Четвертый уровень:</p>
    <select name="cat[]" id="cat_4" disabled="disabled">
        <option value="0"> </option>
    </select>
    
</form>